<template>
    <div>
        <myEditor id="tinymce" :value="value" :init="init"> </myEditor>
        <!-- <div v-html="value"></div> -->
    </div>
</template>

<script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import 'tinymce/themes/silver/theme';
// 这里引入报错可以替换成 import 'tinymce/themes/modern/theme'import "tinymce/icons/default";  //显示富文本图标，如果不加富文本图标显示会变成 !not found
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/code';
import 'tinymce/plugins/directionality';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/link';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/media';
import 'tinymce/plugins/nonbreaking';
import 'tinymce/plugins/pagebreak';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/table';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/image';
import { reject, resolve } from 'tinymce/themes/silver/theme';
import * as UploadAPI from '@/api/upload/upload';
export default {
    components: { myEditor: Editor },
    props: {
        value: String,
    },
    data() {

        return {
            editor: null,
            init: {
                language_url: "/js/zh_CN.js",   // 语言包位置，因为放在public下所以可以省略public
                selector: "#tinymce", //tinymce的id
                language: "zh_CN", //语言类型
                skin_url: "/js/skins/ui/oxide",
                height: 500, //编辑器高度
                width:800,
                branding: false,//是否禁用“Powered by TinyMCE”
                setup: (editor) => {
                    editor.on('input change', () => {
                        // console.log('Input value changed to: ' + editor.getContent());

                        this.$emit('input', editor.getContent());
                    });
                },
                toolbar: [
                    'undo redo removeformat | bold italic underline strikethrough superscript subscript backcolor forecolor | numlist bullist | blocks | searchreplace fullscreen',
                    'fontfamily fontsize fontsizeselect fontsizeinput | alignleft aligncenter alignright alignjustify lineheight outdent indent | link unlink image media | preview code',
                ],
                font_size_formats: '9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 36px 42px 48px 72px',
                // 配置工具栏时添加的 fontsizeinput 工具可以展示一个可输入字号的组件，默认单位是pt，现改为px
                font_size_input_default_unit: 'px',
                plugins:
                    'lists link anchor code wordcount image table visualchars visualblocks searchreplace preview pagebreak nonbreaking media insertdatetime fullscreen directionality autosave autolink advlist',
                images_upload_handler: (blobInfo, success, failure, progress) => {
                    return this.uploadImage(blobInfo, success, failure, progress);
                },

            },
        }
    },
    methods: {
        uploadImage(blobInfo, success, failure, progress) {
            // return new Promise((resolve, reject) => {
            //     console.log(blobInfo, progress);
            //     success("/upload/avatar/2024/02/21/f480e6e9-9aea-49a0-831c-334297cb0b38.jpg");
            //     resolve("/upload/avatar/2024/02/21/f480e6e9-9aea-49a0-831c-334297cb0b38.jpg");

            // })
            if (blobInfo.blob().size / 1024 / 1024 > 2) {
                failure("上传失败，图片大小请控制在 2M 以内")
            } else {
                let params = new FormData();
                params.append("file", blobInfo.blob())
                UploadAPI.uploadImage(params).then(res => {
                    console.log(res.data)
                    success(res.data);
                }).catch(e => {
                    failure(e);
                    this.$message({
                        type: "error",
                        message: "上传失败"
                    })
                })
            }
        },

    },

    mounted() {
        this.$bus.$on('post-submit', this.postSubmit)
        tinymce.init({});
    },
    beforeDestroy() {
        this.$bus.$off('post-submit')
    },
}
</script>

<style lang="scss" scoped>
.tox-tinymce-aux {
    z-index: 10000 !important;
}
</style>